<template>
<div class="tw-lib-common tw-top-list">
  <ul>
    <li @click="handleClick(item)" :class="['tw-top-list-item', { xactive: activeIndex === item.id + '' }]" v-for="(item, index) in navList" :key="index">
      <div class="xlabel">{{ item.label }}</div>
      <div class="item-number">{{ item.value }}</div>
    </li>
  </ul>
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'lib-name',

  mixins: [style],

  props,
  data() {
    return {
      index: 0,
      activeIndex: this.activeId ? this.activeId : (this.navList[0].id + '')
    }
  },

  computed: {
    style() {
      return {
        bgColor: this.bgColor,
        itemBgColor: this.itemBgColor,
        itemMarginRight: this.itemMarginRight,
        lineHeight: this.lineHeight,
        minWidth: this.minWidth,
        minHeight: this.minHeight,
        labelColor: this.labelColor,
        labelFontSize: this.labelFontSize,
        numberColor: this.numberColor,
        numberFontSize: this.numberFontSize,
        activeShadow: this.activeShadow,
        activeBorder: this.activeBorder,
        fontFamily: this.fontFamily
      }
    }
  },

  methods: {
    setStyle() {
      const style = `
        ::root.tw-top-list{
          background-color: ${this.bgColor};
        }

        ::root.tw-top-list .tw-top-list-item{
          line-height: ${this.lineHeight};
          min-width: ${this.minWidth};
          min-height: ${this.minHeight};
          background-color: ${this.itemBgColor};
          margin-right:${this.itemMarginRight};
        }

        ::root.tw-top-list .tw-top-list-item .xlabel{
          color: ${this.labelColor};
          font-size: ${this.labelFontSize};
        }
        ::root.tw-top-list .tw-top-list-item .item-number{
          color: ${this.numberColor};
          font-size: ${this.numberFontSize};
          font-family: ${this.fontFamily};
        }

        ::root.tw-top-list .tw-top-list-item.xactive{
          box-shadow: ${this.activeShadow};
          border: ${this.activeBorder};
        }

      `

      this.addStyle(style)
    },
    handleClick(item) {
      this.activeIndex = item.id + ''
      this.$emit('input', item.id)
      this.$emit('change', item.id)
      console.log('item', item)
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
